<template>
  <el-dialog
    v-model="_isOpen"
    align-center
    width="520"
    modal-class="edit-name-dialog"
    :show-close="true"
    :before-close="beforeClose"
  >
    <template #header>
      <h4>修改名称</h4>
    </template>
    <template #default>
      <el-form :model="_space" ref="formRef" label-width="500px" label-position="left" :rules="rules" @keydown.enter.prevent>
        <el-form-item label="名称" prop="spaceName">
          <el-input maxlength="20" v-model="_space.spaceName" placeholder="请输入名称" />
        </el-form-item>
      </el-form>
    </template>
    <template #footer>
      <div class="dialog-footer">
        <div style="flex: auto">
          <el-button type="info" @click="_isOpen = false">取消</el-button>
          <el-button type="primary" @click="confirm">确认</el-button>
        </div>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, computed } from "vue";
import { spaceQueryUpdateName } from "@/apis/quote-price/following";

const props = defineProps({
  modelValue: { type: Boolean, default: false },
  space: { type: Object, default: () => ({}) },
  budgetId: { type: String, default: "" }
});

const _space = ref(JSON.parse(JSON.stringify(props.space)));

const emit = defineEmits(["update:modelValue", "success"]);

const _isOpen = computed({
  get: () => props.modelValue,
  set: newVal => emit("update:modelValue", newVal)
});

const formRef = ref();
const rules = { spaceName: [{ required: true, message: "请输入", trigger: ["blur"] }] };

const confirm = async () => {
  await formRef.value.validate(async vaild => {
    if (vaild) {
      const { code } = await spaceQueryUpdateName({
        spaceId: _space.value.spaceId,
        budgetId: props.budgetId,
        spaceName: _space.value.spaceName
      });

      if (code === 200) {
        emit("success", _space.value);
        _isOpen.value = false;
      }
    }
  });
};

defineExpose({});
</script>

<style lang="scss">
.edit-name-dialog {
  .el-dialog {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
    .el-dialog__header {
      border-bottom: 1px solid #e2e8f0;
      padding: 0 24px 20px 24px;
    }
    .el-dialog__body {
      padding: 20px;
      .el-form-item {
        flex-direction: column;
      }
    }
    .el-dialog__footer {
      padding-top: 0;
      text-align: center;
    }
  }
  .dialog-footer {
    box-shadow: 0px -3px 10px 0px rgba(4, 24, 48, 0.1);
    margin: 0;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
</style>
<style lang="scss" scoped>
.el-button--primary {
  --el-button-bg-color: #424e66;
  border: none;
}
.el-button.el-button--info {
  --el-color-info: #f2f3f5;
  --el-color-white: #1d2129;
  &:hover {
    --el-button-hover-bg-color: #f2f3f5 !important;
    border-color: #f2f3f5 !important;
  }
}
</style>
